<template>
	<view>
		<!-- 摄像头组件 -->
		<camera device-position="back" flash="off" class="camera" @error="error" v-if="showCamera"></camera>
		<!-- 预览图片 -->
		<image mode="widthFix" class="image" :src="photoPath" v-if="showImage"></image>
		
		<view class="operate-container">
			<button type="primary" class="btn" @tap="clickBtn">{{ btnText }}</button>
			<button type="warn" class="btn" @tap="afresh">重拍</button>
		</view>
		<view class="notice-container">
			<text class="notice">注意事项</text>
			<text class="desc">
				<block v-if="type!='driverCardBack'">拍照的时候，必须把证件拍摄清晰并完整，否则影响识别结果。持证拍照的时候不许戴帽子、墨镜和面纱等遮挡五官的饰物，只拍摄上半身即可。手持证件，五官与证件必须同时拍摄到照片中。</block>
				<block v-if="type=='driverCardBack'">拍照的时候，必须把驾驶证背面拍摄的清晰完整，否则影响认证结果。</block>
			</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			type: null,
        	photoPath: '',
        	btnText: '拍照',
        	showCamera: true,
        	showImage: false
		};
	},
	onLoad:function(options){
		//还原图片的名称(idcardHolding  手持身份证,  drcardHolding手持驾照, drcardBack驾驶证背面)
		this.type = options.type;
	},
	methods: {
		//重拍
		afresh: function() {
			let that = this;
			that.showCamera = true;
			that.showImage = false;
			that.btnText = '拍照';
		},
		//点击拍照
		 clickBtn: function() {
			let that = this;
			if (that.btnText == '拍照') {
				//调用uni-app摄像头操作
				let ctx = uni.createCameraContext();
	            //获取图片,可指定图片质量的值为high（高质量）、normal（普通质量）、low（低质量），默认normal
				ctx.takePhoto({
					quality: 'high',
					success: function(resp) {
						//获取图片临时目录
						that.photoPath = resp.tempImagePath;
						//摄像头的组件关闭
						that.showCamera = false;
						//预览图片打开
						that.showImage = true;
						//更改拍照文字为提交
						that.btnText = '提交';
					}
				});
			} else {
				//你访问的小程序页面历史记录,  getCurrentPages() uni-app内置的函数用于获取当前页面栈的实例
				let pages = getCurrentPages(); 
				//上一个小程序页面，为何要减2 （第一个元素【0】为首页，最后一个元素[pages.length-1]为当前页面）
				let prevPage = pages[pages.length - 2];  
				//调用上一个页面的updatePhoto函数，回传拍好的照片   $vm (当前页面的 Vue 实例)
				prevPage.$vm.updatePhoto(that.type, that.photoPath);
				//返回上一个页面
				uni.navigateBack({
					delta: 1
				});
			}
		},
	}
};
</script>

<style lang="less">
@import url('identity_camera.less');
</style>
